<!-- 维护通道号 -->
<script setup lang='ts'>
import {PageConfig, defaultPage, defaultPageSize, defaultPageSizes, defaultLayout} from '@/components/dTable/dFooter'
import {reactive, ref, onMounted, computed} from 'vue'
import {HeaderData} from '@/components/dTable/dTable'
import {FormRules, ElMessage} from 'element-plus'
import { SearchFromItem, SearchButton} from '@/components/dTable/dHeader'
import dTablePromote from '@/components/dTable/dTablePromote.vue'
import { Normal, NotLeadingAndTrailingSpaces} from '@/util/common'
import  dDialog  from '@/components/dDialog/dDialog.vue'
import { inspectItemList, inspectItemChannel, inspectItemListChannel} from '@/api/instrument/Inspection'

const emits = defineEmits(['cancel', 'confirm', 'close'])
const props = defineProps({
  //显示
  showDialog:{
    type:Boolean,
    required:true
  },
  popData:{
    type:Object,
    required:true
  }
})
const formData = computed(() => {
  return props.popData
})

//底部
const pageConfig = ref<PageConfig>({
  currentPage:defaultPage,
  pageSize:defaultPageSize,
  pageSizes:defaultPageSizes,
  total:0,
  disabled:false,
  layout:defaultLayout
})

// 按钮搜索配置
const serachButtons = ref<Array<SearchButton>>([
  {type:'search'}
])

//左侧显示数据
const tableData = ref<Array<any>>([])
//左侧显示数据
const tableData2 = ref<Array<any>>([])
//表格数据
const tableHeaderData = ref<Array<HeaderData>>([
  {prop:'itemCode', label:'检验项目编码', columnType:'text', align:'center', 'min-width':'100'},
  {prop:'itemName', label:'检验项目名称', columnType:'text', align:'center', 'min-width':'100'},
  {prop:'channel', label:'仪器通道号', columnType:'input', align:'center', 'min-width':'100'}
])


// 筛选区功能
const searchFromItems = ref<Array<SearchFromItem>>(
  // [
  //   {label:'', placeholder:'搜索检验子项编号/检验子项名称', type:'input', prop:'value', enterSubmit:true, style:{width:'250px'}}
  // ]
)

const searchFromData = reactive<any>({value:''})

const searchFromRules = reactive<FormRules>({
  value:[
    {required:false, message:'长度应小于50个字符', max:50, trigger: ['change', 'blur']}
  ]
})


const fuzzyQuery = (list:any, keyWord:any) => {
  if (keyWord) {
    const arr:Array<any> = []
    list.map((item, index) => {
      let flag = false
      for (const key in item) {
        if ((key === 'itemCode' || key === 'itemName') && item[key].toLowerCase().indexOf(keyWord.toLowerCase()) !== -1) {
          flag = true
          break
        }
      }
      if (flag) {
        arr.push(item)
      }
    })
    return arr
  } else {
    return list
  }
}

const IflabInstrumentInspectItemList = () => {
  inspectItemListChannel({instrumentId:formData.value.id}).then(res => {
    tableData.value = res.data.data
    tableData2.value = res.data.data
  })
}

const IfinspectItemChannel = () => {
  const subValue:Array<any> = []
  tableData.value.map((item) => {
    subValue.push({itemId:item.id, channel:item.channel, instrumentId:formData.value.id})
  })
  inspectItemChannel(subValue).then(res => {
    if (res.data.code === 200) {
      ElMessage({
        type: 'success',
        message: '操作成功'
      })
      emits('confirm')
    }
  })
}

// 弹窗取消
const oncancel = () => {
  emits('cancel')
}
// 弹窗关闭
const onClose = () => {
  emits('close')
}
// 弹窗保存
const onConfirm = () => {
  for (let i = 0; i < tableData.value.length; i++) {
    if (tableData.value[i].channel && !NotLeadingAndTrailingSpaces.test(tableData.value[i].channel)) {
      ElMessage({
        type: 'error',
        message: '仪器通道号请输入汉字、字母、数字、特殊符号'
      })
      return
    }
    if ((tableData.value[i].channel + '').length > 100) {
      ElMessage({
        type: 'error',
        message: '仪器通道号字数应不超过100'
      })
      return
    }
  }
  IfinspectItemChannel()
}

const onSubmit = () => {
  tableData.value =  fuzzyQuery(tableData2.value, searchFromData.value)
}


// 生命周期
onMounted(() => {
  IflabInstrumentInspectItemList()
})
</script>

<template>
  <d-Dialog :title="'维护通道号'" :show-dialog="showDialog" @cancel="oncancel" @close="onClose" @confirm="onConfirm">
    <d-table-promote
      class=".d-common-flex-full"
      style="min-height:500px;"
      :label-width="0"
      :oper-buttons="[]"
      :search-form-items="searchFromItems"
      :search-buttons="[]"
      :table-data="tableData"
      :table-header-data="tableHeaderData"
      :page-config="pageConfig"
      :search-from-justify="'flexStart'"
      :search-form-data="searchFromData"
      :search-rules="searchFromRules"
      :show-footer="false"
      @form-submit="onSubmit"
    />
  </d-Dialog>
</template>

<style scoped lang="less">
.box{
  	display: flex;
		flex-flow:row wrap;
		justify-content: space-between;
}
.btn{
  display: flex;
  justify-content: right;
  margin-bottom: 5px;
}
</style>